<template>
  <div class='configure-container'>
    <el-row>
      <el-col :span="24">

        <el-col :span="16"
                :offset="8"
                align="right">
          <el-form :inline="true"
                   class="request-form"
                   :model="requestParam">
            <el-select v-model="requestParam.process_id"
                       placeholder="请选择"
                       @change="onSelect">
              <el-option v-for="item in componentProcessList"
                         :key="item.value"
                         :label="item.name"
                         :value="item.value"
                         :disabled="item.content1==='0'?true:false">
              </el-option>
            </el-select>
            <el-select v-model="requestParam.component_type"
                       placeholder="请选择"
                       @change="onSelect">
              <el-option v-for="item in componentTypeList"
                         :key="item.value"
                         :label="item.name"
                         :value="item.value">
              </el-option>
            </el-select>
            <el-input class="col-3"
                      v-model="requestParam.check_name"
                      placeholder="请输入检查项名称"
                      @keyup.enter.native="getData">
            </el-input>
            <el-button type="primary"
                       class="search"
                       @click="getCheckList">查询</el-button>
            <el-button type="primary"
                       @click="onAdd"
                       class="el-icon-plus">添加检查项</el-button>
            <el-button type="primary"
                       @click="back"
                       class="">返回</el-button>
          </el-form>

        </el-col>
      </el-col>

      <el-col :span="24">
        <el-table :data='checkListData.data'
                  height="310px"
                  :header-cell-style="{background:'#f5f5f5'}"
                  border>

          <el-table-column prop='check_id'
                           label='序号'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='check_name'
                           label='检查项名称'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='process_id_name'
                           label='工序状态'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='component_type_name'
                           label='构件类型'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop='updated_at'
                           label='更新时间'
                           align='center'
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label='排序'
                           align='center'
                           show-overflow-tooltip>
            <template slot-scope="scope">

              <!-- <el-form-item> -->
              <el-input v-model="form.pro_name1"></el-input>
              <!-- </el-form-item> -->
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           width="145px"
                           align="center"
                           show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button size="mini"
                         type="text"
                         @click="onSet(scope.row)">设置
              </el-button>
              <el-button size="mini"
                         type="text"
                         @click="onEdit(scope.row)">编辑
              </el-button>
              <el-button size="mini"
                         type="text"
                         @click="onDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination @current-change='handlePageChange'
                       :current-page='requestParam.page'
                       :page-size='requestParam.per_page'
                       :page-sizes="[15,20,30,40]"
                       layout='total,sizes,prev, pager, next, jumper'
                       background
                       :total='checkObje.total_count'
                       align='center'>
        </el-pagination> -->
      </el-col>

    </el-row>
    <!-- 新增弹框 -->
    <el-dialog :title="judge=='create'?'添加检查项':'编辑检查项'"
               width="40%"
               :visible.sync="dialogFormVisible">
      <el-form :model="addForm"
               ref="addForm"
               :rules="rules"
               label-width="100px"
               class="add-form">
        <el-form-item label="工序状态"
                      prop="process_id">
          <el-select v-model="addForm.process_id"
                     placeholder="请选择">
            <el-option v-for="item in componentProcessList"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value"
                       :disabled="item.content1==='0'?true:false">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="构件类型"
                      prop="component_type">
          <!-- <el-input v-model="addForm.type"
                      auto-complete="off"></el-input> -->
          <el-select v-model="addForm.component_type"
                     placeholder="请选择">
            <el-option v-for="item in componentTypeList"
                       :key="item.value"
                       :label="item.name"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查项名称"
                      prop="check_name">
          <el-input v-model="addForm.check_name"
                    auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align:center;">
        <el-button @click="onBack"
                   style="margin-right:10px;">取 消</el-button>
        <el-button type="success"
                   @click="onSave('addForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { checkItemConfigApi } from '@/services/SystemSetting'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  data () {
    return {
      options: [],
      procStatArr: [],
      value: '0',
      addForm: {
        major_id: 0,
        check_name: '',
        component_type: '',
        process_id: ''
      },
      dialogFormVisible: false,
      form: {
        address: []
      },
      addressOptions: [],
      // 检测项列表请求参数
      requestParam: {
        id: 0,
        major_id: 0,
        check_name: '',
        component_type: '',
        process_id: ''
      },
      // 检测项列表数据
      checkListData: {
        data: [],
        total: 0,
        per_page: 15
      },
      checkObje: {
        total_page: 0,
        total_count: 0
      },
      judge: 'create', // 判断是新增还是编辑
      rules: {
        process_id: [
          { required: true, message: '工序状态不能为空', trigger: 'blur' },
          { required: true, message: '工序状态不能为空', trigger: 'change' }
        ],
        component_type: [
          { required: true, message: '构件类型不能为空', trigger: 'blur' },
          { required: true, message: '构件类型不能为空', trigger: 'change' }
        ],
        check_name: [
          { required: true, message: '检查项名称不能为空', trigger: 'blur' }
        ]
      },
      // 构件进度标准码列表
      componentProcessList: [],
      // 构件类型标准码列表
      componentTypeList: []
    }
  },
  methods: {
    // 添加触发的事件
    onAdd () {
      this.judge = 'create'
      this.dialogFormVisible = true
      this.addForm = {}
    },
    // 添加、修改-----保存时触发的事件
    onSave (data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          this.addForm.major_id = this.requestParam.major_id
          if (this.judge === 'create') {
            this.createCheck()
          } else if (this.judge === 'update') {
            this.updateCheck()
          }
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    // 添加、修改------取消时触发的事件
    onBack () {
      this.dialogFormVisible = false
    },
    // 返回检查体系列表页面
    back () {
      this.$router.push({
        path: '/checkItemConfig'
      })
    },
    // 新增检查项
    createCheck () {
      checkItemConfigApi.createCheck({
        data: this.addForm
      }).then(res => {
        // console.log(res, 'create check')
        if (res.code === 0) {
          this.$message.success('新增检查项成功')
          this.dialogFormVisible = false
          this.getCheckList()
        }
      })
    },
    // 修改检查项
    updateCheck () {
      this.addForm.id = this.addForm.check_id
      checkItemConfigApi.updateCheck({
        data: this.addForm
      }).then(res => {
        //  console.log(res, 'update check')
        if (res.code === 0) {
          this.$message.success('修改检查项成功')
          this.dialogFormVisible = false
          this.getCheckList()
        }
      })
    },
    onSelect (val) {
    },
    getData () {

    },
    // 点击设置时触发事件
    onSet (row) {
      this.$router.push({
        path: '/addCheck',
        query: {
          id: row.check_id,
          major_id: this.requestParam.major_id,
          checkInfo: {
            checkName: row.check_name,
            processName: row.process_id_name,
            componentName: row.component_type_name
          }
        }
      })
    },
    // 点击编辑时触发事件
    onEdit (row) {
      this.judge = 'update'
      this.dialogFormVisible = true
      this.addForm = JSON.parse(JSON.stringify(row))
    },
    // 点击删除时触发事件
    onDelete (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteCheck(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除!'
        })
      })
    },
    deleteCheck (row) {
      let deleteData = row
      deleteData.id = row.check_id
      checkItemConfigApi.deleteCheck({
        data: deleteData
      }).then(res => {
        //console.log(res, 'delete check')
        if (res.code === 0) {
          this.$message.success('删除检查项成功')
          this.getCheckList()
        }
      })
    },
    // 点击转时触发事件
    onRevert (row) {

    },
    handlePageChange (page) {
      this.requestParam.page = page
    },
    // 获取检测项列表
    getCheckList () {
      checkItemConfigApi.getCheckList({
        params: this.requestParam
      }).then(res => {
        // console.log(res, 'get check list')
        if (res.code === 0) {
          this.checkListData = res.data
          this.checkListData.data.map((item) => {
            item.process_id_name = this.getProcessStatusName(item.process_id)
            item.component_type_name = this.getComponentTypeName(item.component_type)
          })
        }
      })
    },
    // 获取构件进度标准码
    getProcessStatusCode () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'proccess_status'
        }
      }).then(res => {
        //console.log(res, 'get process status')
        if (res.code === 0 && res.data.list) {
          this.componentProcessList = res.data.list
        }
      })
    },
    // 根据构件进度标准码value获取name
    getProcessStatusName (value) {
      let name = ''
      this.componentProcessList.map((item) => {
        if (item.value === value) name = item.name
      })
      return name
    },
    // 获取构件类型标准码
    getComponentTypeCode () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'component_type'
        }
      }).then(res => {
        //console.log(res, 'get process status')
        if (res.code === 0 && res.data.list) {
          this.componentTypeList = res.data.list
        }
      })
    },
    // 根据构件类型标准码value获取name
    getComponentTypeName (value) {
      let name = ''
      this.componentTypeList.map((item) => {
        if (item.value === value) name = item.name
      })
      return name
    }
  },
  async created () {
    this.requestParam.major_id = this.$route.query.id
    await this.getProcessStatusCode()
    await this.getComponentTypeCode()
    this.getCheckList()
  },
  mounted () {

  }
}
</script>
<style scoped lang='scss'>
.project-style {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding-right: 12px;
  margin-bottom: 20px;
}
.configure-container {
  background: white !important;
  padding: 20px;
  .request-form {
    margin-bottom: 20px;
    .search {
      margin-left: 10px;
    }
  }
}
/deep/ .add-form .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100%;
}
/deep/ .add-form .el-select {
  display: inline-block;
  position: relative;
  width: 100%;
}
</style>
